import React from 'react';
import { Outlet } from 'react-router-dom';
import { Layout as AntLayout } from 'antd';
import Sidebar from './Sidebar';
import Header from './Header';
import { useAppContext } from '../contexts/AppContext';

const { Content } = AntLayout;

const Layout: React.FC = () => {
  const { state } = useAppContext();

  return (
    <AntLayout style={{ minHeight: '100vh' }}>
      <Sidebar />
      <AntLayout style={{ marginLeft: state.sidebarCollapsed ? 80 : 200, transition: 'margin-left 0.2s' }}>
        <Header />
        <Content style={{ 
          padding: '24px', 
          background: '#f5f5f5',
          overflow: 'auto',
        }}>
          <div style={{ 
            minHeight: 'calc(100vh - 112px)', 
            background: '#fff',
            borderRadius: '8px',
            padding: '24px'
          }}>
            <Outlet />
          </div>
        </Content>
      </AntLayout>
    </AntLayout>
  );
};

export default Layout;
